<!--src/views/dashboard/NotFound.vue-->
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回首页
const goHome = () => {
  router.push('/')
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}
</script>

<template>
  <div class="not-found-container">
    <div class="error-content">
      <div class="error-image">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
          <line x1="12" y1="9" x2="12" y2="13"></line>
          <line x1="12" y1="17" x2="12.01" y2="17"></line>
        </svg>
      </div>
      <h1 class="error-title">404</h1>
      <h2 class="error-subtitle">页面未找到</h2>
      <p class="error-description">抱歉，您访问的页面不存在或已被移除</p>

      <div class="error-actions">
        <button @click="goBack" class="action-btn back-btn">
          <i class="icon-arrow-left"></i> 返回上一页
        </button>
        <button @click="goHome" class="action-btn home-btn">
          <i class="icon-home"></i> 返回首页
        </button>
      </div>

      <div class="error-links">
        <p>您还可以：</p>
        <ul>
          <li><a href="/help">联系客服</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.not-found-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  background-color: #f8f9fa;
  color: #343a40;
}

.error-content {
  max-width: 500px;
  text-align: center;
  padding: 2rem;
  border-radius: 0.5rem;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.error-image {
  margin-bottom: 1.5rem;
}

.error-image svg {
  width: 80px;
  height: 80px;
  color: #ff6b6b;
}

.error-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #212529;
}

.error-subtitle {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #495057;
}

.error-description {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #6c757d;
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.action-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-btn {
  background-color: #4dabf7;
  color: #ffffff;
  border: 1px solid #7abaff;
}

.back-btn:hover {
  background-color: #79bbf1;
}

.home-btn {
  background-color: #4dabf7;
  color: white;
  border: 1px solid #339af0;
}

.home-btn:hover {
  background-color: #79bbf1;
}

.error-links {
  font-size: 0.875rem;
  color: #6c757d;
}

.error-links ul {
  list-style: none;
  padding: 0;
  margin-top: 0.5rem;
}

.error-links li {
  margin-bottom: 0.5rem;
}

.error-links a {
  color: #4dabf7;
  text-decoration: none;
}

.error-links a:hover {
  text-decoration: underline;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.not-found-container {
  animation: fadeIn 0.5s ease-out;
}
</style>